<template>
    <div style="display: inline-block; float:left;margin-right: 5px;">
        <el-button type="primary" @click="showDialog">{{ title }}</el-button>

        <el-dialog :title="title" :visible.sync="dialogShow" width="50%" :close-on-click-modal="false">
            <el-form ref="form"  label-width="100px">
                <el-form-item label="属性" label-width="100px">
                    <el-radio-group v-model="field" size="mini">
                        <el-radio-button :label="i" v-for="(item, i) in fields" v-if="!fieldFilter.length || fieldFilter.includes(i)" :key="i">{{ item }}</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="分隔符" label-width="100px">
                    <el-radio-group v-model="type" size="mini">
                        <el-radio-button :label="0">回车换行</el-radio-button>
                        <el-radio-button :label="1">逗号隔开</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="待复制内容" label-width="100px">
                    <el-input autosize type="textarea" auto-complete="off" :value="content"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :loading="loading" @click="submit($event)">点我复制</el-button>
                    <el-button @click="cancel">返回</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import Clipboard from 'clipboard';

export default {
    props: {
        data: {
            type: Array,
            default () {
                return [];
            },
        },
        fieldFilter: {
            type: Array,
            default () {
                return ['playerId', 'player_id', 'userId',  'user_id', 'mobile', 'uuid'];
            },
        },
        fieldDefault: '',
        // columnInfos: {
        //     type: Array,
        //     default () {
        //         return [];
        //     }
        // },
        title: {
            type: String,
            default: '复制指定字段',
        },
        target: {
            type: String,
            default() {
                return 'xTable';
            }
        }
    },
    data () {
        return {
            loading: false,
            columnInfos: [],
            // fields: {
            //     playerId: 'playerId',
            //     player_id: 'playerId',
            //     userId: 'userId',
            //     mobile: '手机号',
            //     uuid: '设备码',
            // },
            // content: '',
            field: 'playerId',
            type: 0,
            dialogShow: false,
        };
    },
    computed: {
        content () {
            let content = '';
            let split = this.type ? ',' : '\r\n';
            this.data.map(v => {
                if (v && v[this.field]) content += split + v[this.field];
            });
            return content.substr(split.length);
        },
        fields () {
            let obj = {};
            this.columnInfos.map(v => {
                if (!v.field) return ;
                obj[v.field] = v.title;
            });
            return obj;
        }
    },
    watch: {
        data (newVal) {
            this.syncForm();
        }
    },
    methods: {
        submit(event) {
            const cb = new Clipboard('.t', {
                text: () => this.content,
            });
            cb.on('success', (e) => {
                cb.off('error');
                cb.off('success');
                this.$message.success('复制成功');
                this.$emit('submit');

            });
            cb.on('error', (e) => {
                cb.off('error');
                cb.off('success');
                console.error('clipboardCopy error', e);
                this.$message.warning('复制失败');
            });
            cb.onClick(event);
        },
        cancel() {
            this.dialogShow = false;
        },
        syncForm() {
            // this.content = this.data;
            if (this.fieldDefault) this.field = this.fieldDefault;

        },
        showDialog() {
            if (!this.data.length) {
                this.$message.warning("请先选择数据");
                return ;
            }
            this.dialogShow = true;
        }
    },
    created() {
        this.syncForm();

        this.$nextTick(() => {
            this.columnInfos = this.$parent.$refs[this.target].getColumns()
            // console.log(this.columnInfos);
        });
    }
}
</script>

<style scoped>

</style>
